<template>
  <div class="div1">
    <h2 class="h1">店铺信息</h2>
    <el-form ref="form" :model="form" label-width="100px" padding-right="30px" class="form1">
      <el-form-item label="店铺名称:">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="店铺编号:"> 
        {{form.id}}      
      </el-form-item>
      <el-form-item label="主营类目:">
        <el-input v-model="form.type"></el-input>
      </el-form-item>
      <el-form-item label="创建日期:"> 
        {{form.dateCreated}}
      </el-form-item>
      <el-form-item label="店铺LoGo:">
        <div class="div2">
          <img src="../assets/img/123.jpg" alt="123">
        </div>
      </el-form-item>
      <el-form-item label="店铺简介：">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
        <el-form-item label="QQ号:">
        <el-input v-model="form.qq"></el-input>
      </el-form-item>
      <el-form-item label="客服电话:">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="店铺地址:">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>
<script>
  import {getStore,removeStore} from "../http/staff"
  export default {
    data() {
      return {
        form: {}
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        getStore()
        .then((res) => {
          this.form = res.data.data
          console.log(this.form)
        })
        .catch((err) => {
          console.log(1,err)
        })
      },
      onSubmit() {
        console.log(this.form);
        removeStore(this.form)
        .then((res) => {
          console.log(res)
        })
        .catch((err) => {
          console.log(err)
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
.div1 {
 
  background: #fff;
 
}
.h1{
  padding:30px;
  font-weight: 200; 
  
}
.form1 {
  width: 60%;
  padding:0 0 30px;
  margin: 0 auto;
 
}
.div2 {
  text-align: left;
  
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    vertical-align: middle;
  }
}
</style>